<!--vue模板   closeOnClickModal 设置为false ，点击遮罩时不会关闭dialog ，否则会关闭-->
<template>
  <el-dialog
    v-model="visible"
    :closeOnClickModal="false"
    width="35%"
    :title="title"
    @close="close"
  >
    <el-form label-width="120px">
      <el-form-item label="字典类型" :class="{ hid: type == 2 }">
        <el-input v-model="dict.dictType" placeholder="字典类型，如 gender " />
      </el-form-item>

      <el-form-item label="字典编码" :class="{ hid: type == 1 }">
        <el-input v-model="dict.code" placeholder="字典编码,如001 " />
      </el-form-item>

      <el-form-item label="字典名称">
        <el-input v-model="dict.name" placeholder="字典名称, 如 性别" />
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="dict.note" type="textarea" resize="none" :rows="4" />
      </el-form-item>

      <el-form-item label="排序" :class="{ hid: type == 1 }">
        <el-input-number v-model="dict.sorts" :min="0" :step="1" />
      </el-form-item>
    </el-form>

    <div style="text-align: center">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<!--vue 组件选项定义-->
<script>
import { Plus } from "@element-plus/icons-vue";
export default {
  data() {
    return {
      dict: {
        dictType: "",
        name: "",
        note: "",
        code: "",
        sorts: 0,
        pid: null,
      },
      type: 1, //默认添加类型
    };
  },

  computed: {
    title() {
      if (this.type == 1) {
        return "添加字典类型";
      } else {
        return "添加字典数据";
      }
    },
  },

  components: {
    Plus,
  },
  emits: ["update:visible", "refreshData"],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },

  methods: {
    /**
     * type 类型  1 添加字典类型的 2字典数据
     * pid 添加字典数据时用的 对应字典类型的id
     * data 修改的字典数据
     */
    init(type,data,pid) {
      this.type = type;

      //判断data 存在 是修改
      if (data) {
        this.dict = data;
      } else {
        //添加
        this.dict = {
          dictType: "",
          name: "",
          note: "",
          code: "",
          sorts: 0,
          pid: null
        };

        if (pid) {
        //说明是添加字典数据的
        this.dict.pid = pid;
      }

      }
    },

    save() {
      let api=this.dict.id==undefined?"/api/dict/save":"/api/dict/update";
      this.$http.post(api, this.dict).then((res) => {
        if (res.code == 200) {
          this.$message.success("保存成功");
          //关闭弹框
          this.close();

          //通知父组件刷新数据
          this.$emit("refreshData");
        }
      });
    },

    close() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.hid {
  display: none;
}
.avatar-uploader .avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
  border: 1px dashed var(--el-border-color);
}
</style>
